<template>
  <div class="page-container-padding">
    <div>
      <el-select
        v-model="currentUserId"
        filterable
        remote
        placeholder="输入手机号/用户号搜索用户"
        size="mini"
        :remote-method="getUserListWithKeyword"
      >
        <el-option
          v-for="u in userList"
          :key="u.id"
          :value="u.id"
          :label="`${u.username}${u.nickname}`"
        />
      </el-select>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 6px"
        :disabled="!currentUserId"
        @click="getUserBlocks"
      >
        查询
      </el-button>
    </div>
    <div class="gap-line">
      <div>用户定制板块管理</div>
    </div>
    <div>
      <el-button
        type="success"
        size="mini"
        :disabled="!currentUserId"
        @click="toAddUserBlock"
      >
        添加板块
      </el-button>
    </div>
    <!-- 用户已定制板块 -->
    <div style="margin: 10px 0">
      <el-table border stripe :data="userBlock.blocks">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="block_name" label="名称" />
        <el-table-column prop="active_expire" label="有效期" width="100" />
      </el-table>
    </div>

    <div class="gap-line">
      <div>用户板块定制品种管理</div>
    </div>
    <div style="display: flex; align-items: center">
      <el-select v-model="userVariety.blockId" size="mini">
        <el-option
          v-for="b in userBlock.blocks"
          :key="b.id"
          :value="b.flex_block_id"
          :label="b.block_name"
        />
      </el-select>
      <el-button
        size="mini"
        type="primary"
        style="margin-left: 6px"
        :disabled="!userVariety.blockId"
        @click="getUserBlockVarieties"
      >
        查询
      </el-button>
      <el-button
        size="mini"
        type="success"
        :disabled="!userVariety.blockId"
        @click="toAddUserVariety"
      >
        添加品种
      </el-button>

      <div style="margin-left: auto">
        <el-date-picker v-model="userVariety.expireDate" size="mini" />
        <el-button
          type="success"
          size="mini"
          style="margin-left: 8px"
          @click="toOpenBlockAllVariety"
        >
          开通全品种
        </el-button>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-table border stripe :data="userVariety.vList">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="block_name" label="板块" />
        <el-table-column prop="flex_block_id" label="板块ID" width="80" />
        <el-table-column prop="name" label="品种" />
        <el-table-column prop="variety_en" label="品种代码" width="90" />
        <el-table-column prop="active_expire" label="有效期" width="110" />
      </el-table>
    </div>

    <div class="gap-line">
      <div>用户板块定制数据包管理</div>
    </div>
    <div>
      <el-select v-model="userDataZip.blockId" size="mini">
        <el-option
          v-for="b in userBlock.blocks"
          :key="b.id"
          :value="b.flex_block_id"
          :label="b.block_name"
        />
      </el-select>
      <el-button
        size="mini"
        type="primary"
        style="margin-left: 6px"
        :disabled="!userDataZip.blockId"
        @click="getUserDataZip"
      >
        查询
      </el-button>
      <el-button
        size="mini"
        type="success"
        :disabled="!userDataZip.blockId"
        @click="toAddUserDataZip"
      >
        添加数据
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table border stripe :data="userDataZip.dataZipList">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="index_name" label="数据组" />
        <el-table-column prop="lasted_years" label="近x年" width="90" />
        <el-table-column prop="start_date" label="开始日期" width="110" />
        <el-table-column prop="end_date" label="结束日期" width="110" />
        <el-table-column prop="active_expire" label="有效期" width="110" />
      </el-table>
    </div>

    <!-- 新建用户板块弹窗 -->
    <el-dialog :visible.sync="userBlock.showCreateDig" title="用户添加板块">
      <div style="padding: 0 15px">
        <el-form label-width="80">
          <el-form-item label="选择板块">
            <el-select v-model="userBlock.addBlockId" size="mini" filterable>
              <el-option
                v-for="b in blockList"
                :key="b.id"
                :label="b.block_name"
                :value="b.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户ID">
            <span style="color: #d2291e; font-weight: 600">
              {{ currentUserId }}
            </span>
          </el-form-item>
          <el-form-item label="有效期">
            <el-date-picker
              v-model="userBlock.addExpireDate"
              type="date"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="userBlock.showCreateDig = false">
          取消
        </el-button>
        <el-button
          type="primary"
          size="mini"
          :loading="userBlock.addLoading"
          @click="toSaveUserBlock"
        >
          确定添加
        </el-button>
      </div>
    </el-dialog>
    <!-- 新建用户板块下的品种 -->
    <el-dialog
      :visible.sync="userVariety.showCreateDig"
      title="用户板块添加品种"
    >
      <div style="padding: 0 15px">
        <el-form label-width="80">
          <el-form-item label="板块ID">
            <span>{{ userVariety.blockId }}</span>
          </el-form-item>
          <el-form-item label="用户ID">
            <span>{{ currentUserId }}</span>
          </el-form-item>
          <el-form-item label="选择品种">
            <el-select v-model="userVariety.varietyEn" filterable>
              <el-option
                v-for="v in varietyList"
                :key="v.variety_en"
                :value="v.code"
                :label="`${v.name} (${v.code})`"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="有效期">
            <el-date-picker v-model="userVariety.expireDate" type="date" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="userVariety.showCreateDig = false">
          取消
        </el-button>
        <el-button
          type="primary"
          size="mini"
          :loading="userVariety.saveLoading"
          @click="toSaveUserVariety"
        >
          确定添加
        </el-button>
      </div>
    </el-dialog>
    <!-- 新建用户定制数据包 -->
    <el-dialog :visible.sync="userDataZip.showCreateDig" title="定制数据包">
      <div style="padding: 0 15px">
        <el-form label-width="70px">
          <el-form-item label="数据包">
            <el-select v-model="userDataZip.blockGroupId">
              <el-option
                v-for="dat in blockDataZipList"
                :key="dat.id"
                :value="dat.id"
                :label="dat.index_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="近x年">
            <el-input-number
              v-model="userDataZip.lastYears"
              :min="0"
              :max="50"
            />
          </el-form-item>
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="userDataZip.startDate"
              placeholder="指标的开始日期"
            />
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="userDataZip.endDate"
              placeholder="指标的结束日期"
            />
          </el-form-item>
          <el-form-item label="有效期">
            <el-date-picker
              v-model="userDataZip.active_expire"
              placeholder="定制的有效期"
            />
          </el-form-item>
          <el-form-item label="板块ID">
            {{ userDataZip.blockId }}
          </el-form-item>
          <el-form-item label="用户ID">
            {{ currentUserId }}
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="userDataZip.showCreateDig = false">
          取消
        </el-button>
        <el-button
          type="primary"
          size="mini"
          :loading="userDataZip.saveLoading"
          @click="toSaveUserDataZip"
        >
          确定添加
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { RetrieveUser, RetrieveVariety } from '@/api/adminRuizhi/common'
  import {
    RetrieveFlexBlock,
    CreateUserFlexBlock,
    RetrieveUserFlexBlock,
    RetrieveUserBlockVariety,
    CreateUserBlockVariety,
    RetrieveBlockIndexGroup,
    CreateBlockGroupUser,
    RetrieveBlockGroupUser,
  } from '@/api/adminRuizhi/datalibflex'
  export default {
    data() {
      return {
        currentUserId: null,
        userList: [],
        blockList: [],
        varietyList: [],
        blockDataZipList: [], // 当前板块内的数据包
        userBlock: {
          queryLoading: false,
          blocks: [],
          addBlockId: null,
          addExpireDate: new Date(),
          showCreateDig: false,
          addLoading: false,
        },
        userVariety: {
          vList: [],
          blockId: null,
          varietyEn: null,
          expireDate: new Date(),
          showCreateDig: false,
          queryLoading: false,
          saveLoading: false,
        },
        userDataZip: {
          dataZipList: [],
          blockId: null,
          blockGroupId: null,
          lastYears: null,
          startDate: null,
          endDate: null,
          active_expire: new Date(),
          showCreateDig: false,
          saveLoading: false,
        },
      }
    },
    mounted() {
      RetrieveFlexBlock().then((res) => {
        this.blockList = res.data.blocks
      })
      RetrieveVariety(null, 'S05').then((res) => {
        this.varietyList = res.data.data
      })
    },
    methods: {
      getUserListWithKeyword(kw) {
        if (kw.length < 3) return
        RetrieveUser(kw).then((res) => {
          this.userList = res.data.rows
        })
      },

      getUserBlocks() {
        this.userBlock.queryLoading = true
        RetrieveUserFlexBlock(this.currentUserId).then((res) => {
          this.userBlock.blocks = res.data.blocks
          this.userBlock.queryLoading = false
        })
      },
      toAddUserBlock() {
        this.userBlock.showCreateDig = true
      },
      toSaveUserBlock() {
        if (!this.currentUserId || !this.userBlock.addBlockId) return
        this.userBlock.addLoading = true
        CreateUserFlexBlock({
          flex_block_id: this.userBlock.addBlockId,
          user_id: this.currentUserId,
          active_expire: datetimeToStr(this.userBlock.addExpireDate, true, '-'),
        })
          .then((res) => {
            this.$baseMessage(res.message, 'success')
            this.userBlock.addLoading = false
            this.userBlock.showCreateDig = false
            this.getUserBlocks()
          })
          .catch(() => {
            this.userBlock.showCreateDig = false
          })
      },

      getUserBlockVarieties() {
        this.userVariety.queryLoading = true
        RetrieveUserBlockVariety(
          this.currentUserId,
          this.userVariety.blockId
        ).then((res) => {
          this.userVariety.vList = res.data.block_variety
          this.userVariety.queryLoading = false
        })
      },

      toAddUserVariety() {
        this.userVariety.showCreateDig = true
      },

      toOpenBlockAllVariety() {
        CreateUserBlockVariety({
          flex_block_id: this.userVariety.blockId,
          variety_en: 'VAR_ALL',
          user_id: this.currentUserId,
          active_expire: datetimeToStr(this.userVariety.expireDate, true, '-'),
        })
          .then((res) => {
            this.$baseMessage(res.message, 'success')
            this.userVariety.saveLoading = false
            this.userVariety.showCreateDig = false
            this.getUserBlockVarieties()
          })
          .catch(() => {
            this.userVariety.showCreateDig = false
          })
      },

      toSaveUserVariety() {
        const bData = {
          flex_block_id: this.userVariety.blockId,
          variety_en: this.userVariety.varietyEn,
          user_id: this.currentUserId,
          active_expire: datetimeToStr(this.userVariety.expireDate, true, '-'),
        }
        if (!bData.variety_en) {
          this.$baseMessage('请先选择品种，再操作!', 'error')
          return
        }
        this.userVariety.saveLoading = true
        CreateUserBlockVariety(bData)
          .then((res) => {
            this.$baseMessage(res.message, 'success')
            this.userVariety.saveLoading = false
            this.userVariety.showCreateDig = false
            this.getUserBlockVarieties()
          })
          .catch(() => {
            this.userVariety.showCreateDig = false
          })
      },

      getUserDataZip() {
        RetrieveBlockGroupUser(
          this.currentUserId,
          this.userDataZip.blockId
        ).then((res) => {
          this.userDataZip.dataZipList = res.data.index_list
        })
      },

      toAddUserDataZip() {
        if (this.blockDataZipList.length < 1) {
          RetrieveBlockIndexGroup(this.userDataZip.blockId).then((res) => {
            this.blockDataZipList = res.data.groups
            this.userDataZip.showCreateDig = true
          })
        } else {
          this.userDataZip.showCreateDig = true
        }
      },
      toSaveUserDataZip() {
        const bData = {
          block_group_id: this.userDataZip.blockGroupId,
          user_id: this.currentUserId,
          lasted_years:
            this.userDataZip.lastYears === 0
              ? null
              : this.userDataZip.lastYears,
          active_expire: datetimeToStr(
            this.userDataZip.active_expire,
            true,
            '-'
          ),
          start_date: this.userDataZip.startDate
            ? datetimeToStr(this.userDataZip.startDate)
            : null,
          end_date: this.userDataZip.endDate
            ? datetimeToStr(this.userDataZip.endDate)
            : null,
          note: this.userDataZip.note,
        }
        CreateBlockGroupUser(bData).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.userDataZip.showCreateDig = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .gap-line {
    background-color: #eee;
    height: 20px;
    line-height: 20px;
    padding-left: 12px;
    color: #f03300;
    margin: 10px 0;
  }
</style>
